<template>
	<view class="beauty-modal" v-if="visible" @touchmove.stop.prevent @click="close">

		<view class="modal-content">
			<view class="modal-header">
				<text class="modal-title">美颜</text>
			</view>
			<view class="modal-body">
				<scroll-view class="beauty-list" scroll-x>
					<view class="beauty-item" v-for="(item, index) in options" :key="index"
						@click="selectOption(index)">
						<!-- 添加图片 -->
						<image class="beauty-icon" :src="getIconPath(index)" mode="aspectFit" />
						<text class="beauty-text">{{ item }}</text>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			visible: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				options: ['无', '一键美颜', '再美一点', '超级加倍'],
				// 图片名称数组，与options顺序对应
				iconNames: ['wu', 'yi', 'zai', 'cao']
			}
		},
		methods: {
			close() {
				this.$emit('close')
			},
			selectOption(index) {
				this.$emit('select', this.options[index])
				this.close()
			},
			// 获取图片路径
			getIconPath(index) {
				return `/static/${this.iconNames[index]}.png`
			}
		}
	}
</script>

<style lang="scss">
	.beauty-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999;

		.modal-mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
		}

		.modal-content {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0 0;
			padding: 30rpx;
			box-sizing: border-box;
		}

		.modal-header {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #eee;

			.modal-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}
		}

		.modal-body {
			padding-top: 20rpx;
		}

		.beauty-list {
			white-space: nowrap;
			width: 100%;
		}

		.beauty-item {
			display: inline-flex;
			/* 改为flex布局 */
			flex-direction: column;
			align-items: center;
			padding: 20rpx 30rpx;
			margin-right: 20rpx;
			text-align: center;
			border-radius: 40rpx;
			background-color: #f7f7f7;

			&:last-child {
				margin-right: 0;
			}

			.beauty-icon {
				width: 60rpx;
				height: 60rpx;
				margin-bottom: 10rpx;
			}

			.beauty-text {
				font-size: 24rpx;
				color: #333;
			}

			&:active {
				background-color: #e5e5e5;
			}
		}
	}
</style>